<template>
    <div class="card">
        <!-- {{this.cardData}} -->
        <div class="block">
            <div v-if="this.cardData == ''" class="noEquipment"> 
                该项绑定设备未开启
            </div>
            <el-carousel trigger="click" class="card_hight" :autoplay="false"  :initial-index="cardData.index" >
            <el-carousel-item v-for="item in cardData.unit" :key="item.index">
                <!-- 设备标题 -->
                 <router-link to="/overview">
                     <h4 class="normal" @click="router('xtg403',item)" :title="item.name">
                        <!-- <svg class="icon card_icon" aria-hidden="true">
                            <use xlink:href="#icon-jiedian"></use>
                        </svg> -->
                        <img class="title_icon" src="../../assets/title.png" alt />
                        {{item.typename}}:&nbsp;{{item.name}}
                    </h4>
                 </router-link>
                <!-- 卡片内容 -->
                <div class="card_padding">
                    <div v-for="item2 in item.unit" :key="item2.index" class="card_pdiv"  v-if="item2.ready == 1">
                        <div class="item">
                            <div class="overflowHidden">
                                {{item2.name}}
                            </div>
                            <!-- <svg :class='item2.value == 0 ? "icon gjd_icon color_normal":"icon gjd_icon warning"'  aria-hidden="true">
                                <use xlink:href="#icon-anfang"></use>
                            </svg> -->
                               <svg class='icon gjd_icon warning2'  aria-hidden="true" v-if="item2.alarmstate == 1">
                                <use xlink:href="#icon-anquan"></use>
                            </svg>
                            <svg class='icon gjd_icon color_green'  aria-hidden="true" v-if="item2.alarmstate != 1 &&((item2.value == 1 && item2.alarmhighenable != 1) || (item2.value == 0 && item2.alarmlowenable != 0))">
                                <use xlink:href="#icon-anquan"></use>
                            </svg>
                            <svg class='icon gjd_icon color_orange'  aria-hidden="true" v-if="item2.alarmstate != 1 &&((item2.value == 1 && item2.alarmhighenable == 1) || (item2.value == 0 && item2.alarmlowenable == 0))">
                                <use xlink:href="#icon-anquan"></use>
                            </svg>
                        </div>
                    </div>
                </div>
                
            </el-carousel-item>
            </el-carousel>
        </div>
        
    </div>
</template>

<script>
export default {
    props: ['nowIndex', 'cardData', 'nowId'],
    data () {
        return{
        }
    },
    created() {
    },
    methods: {
        // 跳转
        router(val,item){
            var arr = {
                addr:item.addr,
                name:item.name,
                type:item.type,
                uid:item.uid
            }
            localStorage.setItem("当前设备编号", JSON.stringify(arr))
            localStorage.setItem("menuRouter", val)
        },
    },
     // 清除定时器
    beforeDestroy() {
    },
}
</script>

<style scoped>

/deep/ .el-carousel__container .el-carousel__arrow {
    height: 150px !important;
    width: 110px !important;
    border-radius: 0;
    background: none;
}
/deep/ .el-icon-arrow-left {
    margin-left: -110px !important;
}
/deep/ .el-icon-arrow-right{
    margin-right: -110px !important;
}
/deep/ .el-carousel__indicators{
    display: none;
}
.card_padding .item .overflowHidden{
    width: 110px;
    border-left: 5px solid #5ac2f2;
    padding-left: 10px;
    /* float: left; */
}
.card_padding{
    height: 220px;
    padding: 0px 10px 10px 10px;
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
}
.gjd_icon{
    position: relative;
    top: -2px;
}
.card_pdiv{
    flex: 1;
}
.card_padding .item{
    padding-left: 10px;
    font-size: 16px;
    /* justify-content: center; */
    align-items: center;
    display: flex;
}
</style>